<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:g="http://base.google.com/ns/1.0"
      xmlns:fb="http://www.facebook.com/2008/fbml">
    <f:metadata>
        <f:viewParam name="q" value="#{lasTirasList.currentDate}"/>
    </f:metadata>
    <h:head>
        <title>Las Tiras</title>        
    </h:head>
    <h:body>
        <ui:composition template="commons/template.xhtml">    

            <ui:define name="content">
                <f:view>
                    <h:form>

                        <h:panelGrid columns="1">
                            <h:panelGrid id="datePanelGripOne" style="width: 700px; text-align: center; font-size: 21px; color: #000000;" columns="3" width="700">
                                <h:link style="width: 25px; text-align: center; font-size: 21px; color: #000000;" outcome="index.xhtml">
                                    <img width="40px" src="resources/images/left.png"></img>
                                    <f:param name="q" value="#{lasTirasList.lastDate}"/>
                                </h:link>
                                <h:outputText id="currentDateOne" style="width: 233px; font-family: 'arial'; text-align: center; font-size: 25px; color: #4075A6; font-weight: bolder" value="#{lasTirasList.acquireStripDate()}" />
                                <h:link style="width: 25px; text-align: center; font-size: 21px; color: #000000;" outcome="index.xhtml">
                                    <img width="40px" src="resources/images/right.png"></img>
                                    <f:param name="q" value="#{lasTirasList.nextDate}"/>
                                </h:link>
                            </h:panelGrid>

                            <h:dataTable style="width: 700px; text-align: center;" value="#{lasTirasList.currentStripe.strips}" var="item">
                                <h:column>
                                    <div id="#{lasTirasList.getDivId(item.id)}">
                                        <h:panelGrid columns="1" style="width: 700px; text-align: center;">

                                            <a href="#{item.stripUrl}">
                                                <img id="#{lasTirasList.acquireId(item)}" style="max-width: 700px;" src="resources/images/ajax-loader.gif" onload="#{lasTirasList.acquireJavaScritCall(item)}"/>
                                            </a>

                                            <h:panelGrid columns="1" width="700">
                                                <h:outputLink value="#{item.author.webSite}" style="width: 500">
                                                    <h:outputText value="#{item.author.name}"/>
                                                </h:outputLink>                                                                                    
                                            </h:panelGrid>

                                            <h:panelGrid columns="3" width="700">

                                                <div class="share-toolbar">
                                                    <ul class="share-bar">
                                                        <li class="google1"><div style="height: 24px; width: 106px; display: inline-block; text-indent: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; background-position: initial initial; background-repeat: initial initial; ">
                                                                <iframe 
                                                                    allowtransparency="true" 
                                                                    frameborder="0" 
                                                                    hspace="0" 
                                                                    marginheight="0" 
                                                                    marginwidth="0" 
                                                                    scrolling="no" 
                                                                    src="#{lasTirasList.acquireGooglePlusSrc(item.id)}" 
                                                                    style="width: 106px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; height: 24px; position: static; left: 0px; top: 0px; visibility: visible; " tabindex="-1" vspace="0" width="100%" title="+1">
                                                                </iframe></div></li>
                                                        <li class="tweet">
                                                            <div>
                                                                <a href="https://twitter.com/share" 
                                                                   class="twitter-share-button" 
                                                                   data-url="#{lasTirasList.getCurrentStripeUrlTweeter(item.id)}" 
                                                                   data-count="horizontal" 
                                                                   data-via="lastirasbr"
                                                                   data-text="#{item.author.acquireNameWithTwitterAccountAndHifen()}"
                                                                   original_referer="#{lasTirasList.getCurrentStripeUrl(item.id)}"
                                                                   >Tweet</a>
                                                            </div></li>
                                                        <li class="facebook" style="z-index: 30; text-align: left">
                                                            <div id="fb-root">
                                                            </div>       
                                                            <span style="z-index: 30;">
                                                                <a href="#{lasTirasList.getFacebookSharerPage(item.id)}">
                                                                   <img src="resources/images/fbbutton.png"/>
                                                                </a>
                                                            </span>
                                                        </li>
                                                    </ul><br/>
                                                </div>
                                            </h:panelGrid>
                                            <br></br>
                                            <br></br>
                                            <br></br>
                                        </h:panelGrid>    
                                    </div>
                                </h:column>                            
                            </h:dataTable>

                            <h:panelGrid id="datePanelGripTwo" style="width: 700px; text-align: center; font-size: 21px; color: #000000;" columns="3" width="700">
                                <h:link style="width: 25px; text-align: center; font-size: 21px; color: #000000;" outcome="index.xhtml">
                                    <img width="40px" src="resources/images/left.png"></img>
                                    <f:param name="q" value="#{lasTirasList.lastDate}"/>
                                </h:link>
                                <h:outputText id="currentDateTwo" style="width: 233px; font-family: 'arial'; text-align: center; font-size: 25px; color: #4075A6; font-weight: bolder" value="#{lasTirasList.acquireStripDate()}" />
                                <h:link style="width: 25px; text-align: center; font-size: 21px; color: #000000;" outcome="index.xhtml">
                                    <img width="40px" src="resources/images/right.png"></img>
                                    <f:param name="q" value="#{lasTirasList.nextDate}"/>
                                </h:link>
                            </h:panelGrid>
                            <hr></hr>
                            <br></br>
                        </h:panelGrid>
                    </h:form>
                </f:view>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

